<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中国传统色彩</title>
    <link rel="stylesheet" href="css/reset.css">
    <script src="data/colors.js"></script>
    <script src="js/tools.js"></script>
    <script src="js/pinyin.js"></script>
    <style>
        :root {
            --gap: 1rem;
            --radius: 8px;
            --shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        }

        @font-face {
            font-family: 'chinese';
            src: url(fonts/chinesecolor.woff2) format('woff2');
        }

        body {
            min-height: 100vh;
            background: #f8f9fa url(img/bg.png);
            transition: background-color 0.3s ease;
        }

        header {
            display: flex;
            gap: 2rem;
            align-items: center;
            justify-content: center;
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 1000;
            padding: 0.5rem;
            background: #f8f9fa url(img/bg.png);
            transition: background-color 0.3s ease;
        }

        h1 {
            font-family: 'chinese';
            font-size: 4rem;
            font-weight: 500;
            color: #333;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
        }

        input {
            width: 30rem;
            padding: 0.8rem 1.2rem;
            border: 1px solid #ddd;
            border-radius: var(--radius);
            font-size: 1rem;
            outline: none;
            transition: all 0.3s;

            & :focus {
                border-color: #007bff;
                box-shadow: var(--shadow);
            }
        }

        main {
            max-width: 1200px;
            margin: 7rem auto 0;
        }

        .color-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
            gap: var(--gap);
        }

        .color-card {
            position: relative;
            height: 130px;
            border-radius: var(--radius);
            overflow: hidden;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: .8rem;
            color: white;
            writing-mode: vertical-rl;
            box-shadow: var(--shadow);
            transition: transform 0.2s, box-shadow 0.2s;
            box-shadow: 0 0 10px rgba(22, 22, 22, 0.2);
            position: relative;
        }

        .color-card::before {
            content: attr(data-index);
            position: absolute;
            top: 0.5rem;
            left: 0.5rem;
            color: white;
            font-size: 0.75rem;
            padding: 0.2rem 0.4rem;
        }

        .color-card:hover::after {
            opacity: 1;
        }

        .color-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        .color-name {
            /* font-family: 'chinese'; */
            font-weight: 500;
            font-size: 1.1rem;
            pointer-events: none;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
        }

        .color-value {
            /* font-family: monospace; */
            font-size: 0.9rem;
            opacity: 0.8;
            align-self: flex-end;
            pointer-events: none;
        }

        .color-pinyin {
            display: none;
            pointer-events: none;
        }

        .toast {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 0.8rem 1.5rem;
            border-radius: var(--radius);
            opacity: 0;
            transition: opacity 0.3s;
            pointer-events: none;
        }

        .toast.show {
            opacity: 1;
        }

        @media (max-width: 768px) {
            body {
                padding: 1rem;
            }

            .color-grid {
                grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            }

            h1 {
                display: none;
            }

            #searchInput {
                width: 25rem;
            }
        }
    </style>
</head>

<body>
    <header>
        <h1>中国色</h1>
        <input type="text" id="searchInput" placeholder="搜索颜色名称或色值...">
    </header>
    <main>
        <div class="color-grid" id="colorGrid"></div>
    </main>
    <div class="toast" id="toast">已复制到剪贴板</div>

    <script>
        const colorGrid = document.getElementById('colorGrid');
        const searchInput = document.getElementById('searchInput');
        const toast = document.getElementById('toast');

        function renderColors(filteredColors = colors) {
            const fragment = document.createDocumentFragment();
            filteredColors.forEach((color, index) => {
                const card = document.createElement('div');
                card.className = 'color-card';
                card.dataset.value = color.hex;
                card.dataset.index = index + 1;
                card.style.background = color.hex;
                card.title = converToPinyin(color.name);
                setTextColor(card, color.hex);

                card.innerHTML = `
                    <span class="color-name">${color.name}</span>
                    <span class="color-value">${color.hex.toUpperCase()}</span>
                `;
                fragment.appendChild(card);
            });
            colorGrid.innerHTML = '';
            colorGrid.appendChild(fragment);

            colorGrid.addEventListener('click', function (e) {
                if (e.target.classList.contains('color-card')) {
                    const card = e.target;
                    navigator.clipboard.writeText(card.dataset.value)
                        .then(() => showToast())
                        .catch(err => console.error('复制失败:', err));
                    document.body.style.backgroundColor = card.dataset.value;
                    document.querySelector('header').style.backgroundColor = card.dataset.value;
                    setTextColor(document.querySelector('h1'), card.dataset.value);
                }
            });
        }

        function getBrightness(hex) {
            hex = hex.replace('#', '');
            let r = parseInt(hex.substr(0, 2), 16);
            let g = parseInt(hex.substr(2, 2), 16);
            let b = parseInt(hex.substr(4, 2), 16);
            return (r * 299 + g * 587 + b * 114) / 1000;
        }

        function setTextColor(element, hex) {
            const brightness = getBrightness(hex);
            const textColor = brightness > 125 ? '#000' : '#fff';
            element.style.color = textColor;
        }

        function showToast() {
            toast.classList.add('show');
            setTimeout(() => toast.classList.remove('show'), 1500);
        }

        function debounce(func, wait) {
            let timeout;
            return function () {
                const context = this, args = arguments;
                clearTimeout(timeout);
                timeout = setTimeout(() => func.apply(context, args), wait);
            };
        }

        searchInput.addEventListener('input', debounce((e) => {
            const keyword = e.target.value.toLowerCase();
            const filtered = colors.filter(color =>
                color.name.toLowerCase().includes(keyword) ||
                color.hex.toLowerCase().includes(keyword)
            );
            renderColors(filtered);
        }, 250));

        renderColors();
    </script>
</body>

</html>